<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<table lay-filter="menus">
    <thead>
    <tr>
        <th lay-data="{field:'richMenuId', sort:true}">ID</th>
        <th lay-data="{field:'name'}">名称</th>
        <th lay-data="{field:'chatBarText'}">描述信息</th>
        <th lay-data="{field:'width', width:80}">宽度</th>
        <th lay-data="{field:'height', width:80}">高度</th>
        <th lay-data="{field:'selected'}">选中</th>
        <th lay-data="{field:'areas'}">数量</th>
        <th lay-data="{fixed:'right', align:'center', toolbar: '#opBar'}">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="menu, state : ${list}">
        <td th:text="${menu.richMenuId}"></td>
        <td th:text="${menu.name}"></td>
        <td th:text="${menu.chatBarText}"></td>
        <td th:text="${menu.size.width}"></td>
        <td th:text="${menu.size.height}"></td>
        <td th:text="${menu.selected}"></td>
        <td th:text="${#lists.size(menu.areas)}"></td>
        <td></td>
    </tr>
    </tbody>
</table>
<script type="text/html" id="opBar">
    <button type="button" class="layui-btn">详情</button>
    <button lay-event="delete" type="button" class="layui-btn layui-btn-danger">删除</button>
</script>
<script type="text/javascript">
    layui.use(['table', 'layer', 'jquery'], function () {
        const $ = layui.$
        const table = layui.table;
        // 转换静态表格
        table.init('menus', {
            height: 560,
            limit: 100,
            page: false
        });
        // 监听工具条
        table.on('tool(menus)', function(obj){
            const data = obj.data;
            if (obj.event === 'delete'){
                const param = {
                    'richMenuId': data.richMenuId
                }
                $.post('/richmenu/delete', param, function (res) {
                    layer.msg(res.msg);
                    if (res.code === 0){
                        loadContent($, layer, '/richmenu/list');
                    }
                })
            }
        })
    })
</script>
</html>